<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/mine/mineBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="修改密码" :showBack="true"></cusHeaderVue>
		<scroll-view scroll-y="true"
			:style="{paddingTop: `calc(${scrollerHeight} + 90rpx)`,height: `calc(100vh - ${scrollerHeight} - 90rpx`}">
			<view class="contBox">
				<view class="contLiBox">
					<view class="contLi" @click="toUrl('/pages/mine/changePasswordInpt')">
						<view class="contLeft">
							修改登录密码
						</view>
						<u-icon name="arrow-right" color="#babac2" size="18"></u-icon>
					</view>
					<view class="contLi" @click="gestureClick">
						<view class="contLeft">
							修改手势密码
						</view>
						<u-icon name="arrow-right" color="#babac2" size="18"></u-icon>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 手势密码登录 -->
		<u-popup :show="gestureShow" :safeAreaInsetBottom="false" mode="center" :round="12.82" @close="gestureClose"
			@open="gestureOpen">
			<view class="gestureBox" ref="parentRef" style="padding: 48.08rpx 0 58.33rpx;">
				<view class="gestureTit">
					请绘制手势密码
				</view>
				<view class="gestureTitWidth" id="gestureContainer">
					<!-- <mpvue-gesture-lock ref="mpvueGestureLock" :containerWidth="screenWidth" :cycleRadius="30" @end="onEnd"
						:password="password"></mpvue-gesture-lock> -->
						 <gesture-password :containerWidth="screenWidth" @change="gestureChange"></gesture-password>
				</view>
				<view class="gestureTip">
					至少连接4个点
				</view>
				<!-- <view class="gestureTip" style="color: #2970E9;">
					忘记手势密码?
				</view> -->
				<view class="popupBtn">
					确认修改
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import gesturePassword from '@/components/gzz-gesture/gesture-password.vue';   
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import cusHeaderVue from '@/components/cus-header.vue';
	
	import {
		authLogin,
		updateGuestPassword,
		verifyGesturePassword,
		updateUserPassword
	} from '@/api/interface.js';
	
	const scrollerHeight = ref('');
	const gestureShow = ref(false); //；手势密码登录
	const screenWidth = ref(''); //屏幕宽度
	const password = ref('[]'); //手势密码


	//获取状态栏高度
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(res) {
				scrollerHeight.value = res.statusBarHeight + 'px'
			}
		});
	}
	const gestureChange = (points) =>{
	   // 设置手势密码
	   updateGuestPassword({
	   	password: JSON.stringify(points) // 或根据后端要求改为 { points: plainPoints }
	   }).then(res => {
	   	if(res.data){
	   		uni.showToast({
	   			title: '手势修改成功',
	   			icon: 'success'
	   		});
	   	}else{
	   		uni.showToast({
	   			title: '设置失败，请重试',
	   			icon: 'error'
	   		});
	   		uni.clearStorage();
	   	}
	   	gestureShow.value = false;
	   }).catch(err => {
	   	uni.showToast({
	   		title: '设置失败，请重试',
	   		icon: 'error'
	   	});
	   });
	}
	const getParentWidth = () => {
		setTimeout(()=>{
			// #ifdef MP-WEIXIN
			const query = uni.createSelectorQuery()
			query.select('#gestureContainer').boundingClientRect(res => {
				if (res) {
					console.log('宽度:', parseInt(res.width))
					screenWidth.value = parseInt(res.width) 
				}
			}).exec()
			// #endif
			// #ifdef H5 
			const el = document.querySelector('#gestureContainer')
			console.log(el)
			console.log(el.offsetWidth,'el23')
			screenWidth.value = el.offsetWidth
			// #endif
		},50)
		
	}
	
	const gestureClick = () =>{
		gestureShow.value = true
	}
	const gestureClose = () =>{
		gestureShow.value = false
	}
	const gestureOpen = () =>{
		getParentWidth();
	}

	const toUrl = (urlSrc) => {
		uni.navigateTo({
			url: urlSrc
		})
	}
	onLoad(() => {
		getBarHeight();
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
	}

	.bgColor {
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: -1;
		top: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		padding: 22rpx;
		box-sizing: border-box;
		padding-bottom: calc(env(safe-area-inset-bottom) + 101rpx);
		.contLiBox{
			border-radius: 12.82rpx 12.82rpx 12.82rpx 12.82rpx;
			background: #ffffff;
			box-shadow: 0 3.85rpx 13.46rpx 0 #b6b7b933;
			margin-bottom: 25rpx;
			padding: 1rpx 27rpx;
			box-sizing: border-box;
		}
		.contLi{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 0;
			
			.contLeft{
				 color: #1c2027;
				 font-weight: 500;
				 font-size: 32.05rpx;
			}
		}

		

	}
	.gestureBox {
			width: 643.59rpx;
			padding: 48.08rpx 42.95rpx 58.33rpx;
			box-sizing: border-box;
	
			.gestureTit {
				font-weight: 500;
				font-size: 33.33rpx;
				color: #1C2027;
				text-align: center;
			}
			.gestureTip{
				font-size: 24.36rpx;
				font-weight: 400;
				color: #828384;
				text-align: center;
			}
			.popupBtn{
					width: 435.9rpx;
					height: 83.33rpx;
					border-radius: 41.67rpx 41.67rpx 41.67rpx 41.67rpx;
					background: linear-gradient(90deg, #feaf38,#f98434);
					box-shadow: 0 3.85rpx 4.49rpx 0 #f984344d;
					font-size: 32.05rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 69rpx auto 0;
				}
		}
</style>